@import 'tailwindcss';
@import 'tw-animate-css';
@import './theme.css';

@custom-variant dark (&:is(.dark *));
@theme {
  --breakpoint-3xl: 120rem;
}
@layer base {
  * {
    @apply border-border outline-ring/50;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  html {
    @apply overflow-x-hidden;
  }

  body {
    @apply bg-background text-foreground has-[div[data-variant='inset']]:bg-sidebar min-h-svh w-full;
  }

  /* Override Radix scroll locking for sticky headers */
  body[data-scroll-locked] {
    overflow: unset !important;
  }

  /* Cursor pointer for buttons */
  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  /* Prevent focus zoom on mobile devices */
  @media screen and (max-width: 767px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

@layer utilities {
  .head-shadow {
    box-shadow: 0 4px 12px 0 #ababab;
  }

  .bg-main {
    background: #f0f0f0;
  }

  .title_left_line {
    @apply 3xl:w-[17.375rem] h-[0.125rem] w-[4.375rem] lg:w-[13rem];
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #0e6d61 100%);
  }

  .title_right_line {
    @apply 3xl:w-[17.375rem] h-[0.125rem] w-[4.375rem] lg:w-[13rem];
    background: linear-gradient(
      240deg,
      rgba(217, 217, 217, 0) 0%,
      #0e6d61 100%
    );
  }

  .layout-h1 {
    @apply 3xl:text-[5rem] text-[1.8125rem] leading-[120%] lg:text-5xl;
  }

  .layout-h2 {
    @apply 3xl:text-6xl text-2xl lg:text-3xl;
  }

  .layout {
    @apply 3xl:px-48 px-6 lg:px-28 xl:px-52;
  }

  .layout-left {
    @apply 3xl:w-[calc(100%-12rem)] w-[calc(100%-1.5rem)] lg:w-[calc(100%-7rem)] xl:w-[calc(100%-13rem)];
  }

  .layout_top {
    @apply pt-[3.95rem] lg:pt-[4.8rem];
  }

  .layout_m_top {
    @apply 3xl:mt-[6.55rem] mt-[3.95rem] lg:mt-[5.3rem];
  }
}
